<template>
	<view class="wc-lottery-drawing flex-center">
		
		<view class="box flex-center row-around">
			<view class="box-header"></view>
			<view class="box-content">
				<view class="close flex-center">
					<text>X</text>
				</view>
				<view v-if="isEmpty" style="font-size: 24px;color: #FF341F;">{{ content }}</view>
				<view v-else>
					<price
					    :content="content"
					    mainSize="120rpx"
					    minorSize="69rpx"
						color="#FF341F"
					>
					</price>
				</view>
				<view class="text-center" style="font-size: 18rpx; color: #FF341F;">获得的福利在“钱包”中查看</view>
			</view>
			<view class="box-footer">
				<button 
					size="mini"
					class="btn"
					hover-class="is-hover">去钱包看看</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	const emptyText = '谢谢惠顾'
	export default {
		name: "LotteryDrawing",
		props: {
			text: {
				type: String,
				default: '22'
			}
		},
		computed: {
			
			isEmpty(v) {
				if (!this.text || this.text === '0' || this.text === emptyText) {
					return true
				}
				return false
			},
			content() {
				if (!this.text || this.text === '0') {
					return emptyText
				}
				return this.text
			},
			
		},
		data() {
			return {
				
			};
		},
		methods: {
			isNotMoneyValue(item) {
				// 没有对应的字段, 但是，要排除 0的可能。
				if ( !item.hasOwnProperty(this.contentField) || item[this.contentField] === 0 ) {
					return true
				}
				// 内容是个空，或者内容是一个 谢谢惠顾
				return item[this.contentField] == '' || item[this.contentField] === '谢谢惠顾'
			},
		}
	}
</script>

<style lang="scss" scoped>

.wc-lottery-drawing {
	width: 100%;
	height: 100%;
	
}

.box {
	width: 430rpx;
	height: 458rpx;
	background-image: url('@/static/img/lottery/lottery_item_bg1.png');
	background-repeat: no-repeat;
	background-size: cover;
	&-content {
		position: relative;
		width: 80%;
		margin-bottom: 20rpx;
		text-align: center;
		.close {
			position: absolute;
			right: -22rpx;
			top: -45rpx;
			width: 45rpx;
			height: 45rpx;
		}
	
	}
	&-footer{
		.btn {
			width: 236rpx;
			padding: 0;
			padding: 15rpx;
			margin-top: 10rpx;
			font-size: 30rpx;
			line-height: 1;
			
			font-weight: 500;
			border-radius: 30rpx;
			color: #FF341F;
			background: #FBE945;
		}
	}
}
</style>
